import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import styles from './ChooseModal.less';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Button,
  Modal,
  Tag,
  message,
  Badge,
  Radio,
  Upload,
  Icon,
} from 'antd';

const FormItem = Form.Item;
const { CheckableTag } = Tag;
const Search = Input.Search;
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;

@Form.create()
export default class ChooseTagModal extends PureComponent {
  constructor(props) {
    super(props);

    console.log('初始化数据', this.props.initValue);

  }

  state = {
    tagList: this.props.tagList || [],
    checkedTags: this.props.checkedTags || [],
    oriTagList: this.props.tagList || [],
    oriCheckedTags: [],
  };

  componentWillReceiveProps(nextProps) {
    // console.log('nextPropsnextPropsnextProps===', nextProps)
    if (nextProps && nextProps.checkedTags && ((nextProps.tagList != this.props.tagList) || (nextProps.checkedTags != this.props.checkedTags))) {
      let newTagList = [];
      for (let i = 0; i < nextProps.tagList.length; i++) {
        let one = nextProps.tagList[i];
        let flag = false;
        for (let j = 0; j < nextProps.checkedTags.length; j++) {
          if (one.labelId == nextProps.checkedTags[j].labelId) {
            flag = true;
          }
        }

        one["checked"] = flag;

        newTagList.push(one);
      }

      // console.log('处理后的taglist', newTagList)

      this.setState({
        tagList: newTagList,
        oriTagList: nextProps.tagList,
        checkedTags: nextProps.checkedTags,
        oriCheckedTags: nextProps.checkedTags
      })
    }
  }

  _checkTag(checked, labelId, labelName) {
    console.log(this.state.checkedTags);
    let checkedTags = this.state.checkedTags;

    if (checked) {
      if (this.state.checkedTags && (this.state.checkedTags.length >= 3)) {
        message.error('最多只能选择3个标签')
        return
      } else {
        checkedTags.push({ labelId: labelId, labelName: labelName })
      }

    } else {
      checkedTags = checkedTags.filter(tag => tag.labelId != labelId)
    }

    console.log('checkedTags--------------', checkedTags)
    let newTagList = [];
    for (let i = 0; i < this.state.tagList.length; i++) {
      let one = this.state.tagList[i];
      let flag = false;
      for (let j = 0; j < checkedTags.length; j++) {
        if (one.labelId == checkedTags[j].labelId) {
          flag = true;
        }
      }

      one["checked"] = flag;

      newTagList.push(one);
    }
    console.log('newTagListnewTagList', newTagList)
    this.setState({ checkedTags: checkedTags, tagList: newTagList })
  }

  _renderTag(item) {
    return (
      <CheckableTag key={item.labelId} checked={item.checked}
        className={styles.tag} onChange={(checked) => this._checkTag(checked, item.labelId, item.labelName)}
      >
        {item.labelName}
      </CheckableTag>
    )
  }

  _okHandle() {
    if (!this.state.checkedTags) {
      message.error('请选择标签');
      return;
    }
    this.props.chooseTags(this.state.checkedTags);
    // form.resetFields();
  }

  _onCancel() {
    this.setState({
      tagList: [],
      checkedTags: [],
    })

    this.props.setTagVisible(false)
  }

  render() {
    const { form, record } = this.props;
    return (
      <Modal
        destroyOnClose
        // afterClose={() => { this.setState({ tagList: this.state.oriTagList, checkedTags: this.state.checkedTags }) }}
        width={700}
        title="选择标签"
        visible={this.props.visible}
        onOk={() => this._okHandle()}
        onCancel={() => this._onCancel()}
      >
        <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 9 }} label="标签名称">
          <Search
            placeholder="标签名称"
            enterButton="搜索"
            size="default"
            onSearch={value => this.props.tagSearch(value)}
          />
        </FormItem>
        <div className={styles.tagWrapper}>
          {this.state.tagList && this.state.tagList.map((item, i) => this._renderTag(item))
            // (
            //   <CheckableTag key={item.labelId} checked={(JSON.stringify(this.state.tags).indexOf(item.labelId) != -1) ? true : false} 
            //     className={styles.tag} onChange={(checked) => this._checkTag(checked, item.labelId, item.labelName)}
            //   >
            //     {item.labelName}
            //   </CheckableTag>)
            // )
          }
        </div>

      </Modal>
    );
  }
}